@include base {
    &-title {
        $title-font-size: (
            default: 22px,
            sm: 26px,
            md: 36px
        );
        $title-margin-top: (
            default: 15px,
            md: 25px
        );
        $title-margin-bottom: (
            default: 20px,
            md: 40px
        );
        &-center {
            color: #444;
            text-align: center;
            margin: 0 auto;
            @include responsive($title-font-size, font-size);
            @include responsive($title-margin-bottom, margin-bottom);
            
            &:before {
                content: '\20';
                display: block;
                width: 30px;
                height: 5px;
                background: url('~assets/images/line-small.png') no-repeat center;
                background-size: cover;
                margin: 0 auto;
                @include responsive($title-margin-top, margin-bottom);
            }
        }
    }
    
    &-subpage {
        $subpage-banner-height: (
            default: 180px,
            sm: 320px,
            md: 420px,
            lg: 640px
        );
        $subpage-banner-small-text: (
            default: 16px,
            sm: 32px,
            md: 40px,
            lg: 44px
        );
        $subpage-banner-small-title: (
            default: 20px,
            sm: 40px,
            md: 52px,
            lg: 60px
        );
        $subpage-banner-title: (
            default: 26px,
            sm: 36px,
            md: 40px,
            lg: 44px
        );
        $subpage-banner-title-margin: (
            default: 15px,
            md: 25px,
            lg: 40px
        );
        $subpage-banner-intro: (
            default: 12px,
            sm: 16px,
            md: 18px,
            lg: 20px
        );
        
        &-banner {
            box-sizing: content-box;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            @include responsive($header-height, padding-top);
            @include responsive($subpage-banner-height, height);
            
            &__text {
                display: table;
                width: 100%;
                @include responsive($subpage-banner-height, height);
                
                .inner {
                    display: table-cell;
                    vertical-align: middle;
                    color: #fff;
                    @include responsive($header-height, padding-bottom);
                }
                
                .small {
                    @include responsive($subpage-banner-small-text, font-size);
                }
                
                .title {
                    @include responsive($subpage-banner-small-title, font-size);
                }
            }
            
            &__part {
                display: table;
                width: 100%;
                @include responsive($subpage-banner-height, height);
                
                .inner {
                    display: table-cell;
                    vertical-align: middle;
                    color: #fff;
                    @include responsive($header-height, padding-bottom);
                }
                
                .title {
                    @include responsive($subpage-banner-title-margin, margin-bottom);
                    @include responsive($subpage-banner-title, font-size);
                    
                    &::before {
                        content: '\20';
                        display: block;
                        width: 80px;
                        height: 5px;
                        background: url('~assets/images/line-small.png') no-repeat center;
                        background-size: cover;
                        @include responsive($subpage-banner-title-margin, margin-bottom);
                        display: none;
                        
                        @include adaptive(sm) {
                            & {
                                display: block;
                            }
                        }
                    }
                }
                
                .intro {
                    line-height: 1.6;
                    @include responsive($subpage-banner-intro, font-size);
                }
                
                .name {
                    margin-top: 50px;
                    display: none;
                        
                    @include adaptive(md) {
                        & {
                            margin-top: 30px;
                            display: block;
                        }
                    }
                        
                    @include adaptive(lg) {
                        & {
                            margin-top: 50px;
                        }
                    }
                }
            }
        }
    }
}